<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery1.7/jquery-1.7.js"></script>
    <script>
        function doAdd(){
            //创建节点  $(html字符串)
            // var p=$("<p>");
            // p.html("我是p");
            var p=$("<p class='heihei'>我是p</p>");

            //父元素添加子元素(添加到末尾)
            // $("div").append(p);

            //子元素添加到父元素中
            // p.appendTo($("div"));

            // 父元素添加子元素(添加到开头)
            // $("div").prepend(p);

            //子元素添加到父元素(添加到开头)
            p.prependTo($("div"));

            var ul=$("<ul>我是ul</ul>");
            //在div后面插入ul标签
            // $("div").after(ul);
            ul.insertAfter($("div"));

        }
        function doRemove(){
            // $("div p:first").remove();//删除节点
            $("div p:first").empty();//清空节点，清空后代的节点
        }
        function doClone(){
            $("div p:first").click(function(){
                console.log("绑定了点击事件");
            });
            $("div p:first").clone(true).appendTo($("div"));//true表示克隆元素的同时也复制元素中的事件
        }
        function doReplace(){
            // 已经存在的节点.replaceWith(新创建的节点);
            // $("div p:first").replaceWith($("<li>我是新创建的li</li>"));

            // 新创建的节点.replaceAll(已经存在的节点);
            $("<li>我是新创建的liaaaaa</li>").replaceAll($("div p:first"));
        }
    </script>
</head>
<body>
    <input type="button" value="添加节点" onclick="doAdd()">
    <input type="button" value="删除节点" onclick="doRemove()">
    <input type="button" value="克隆节点" onclick="doClone()">
    <input type="button" value="替换节点" onclick="doReplace()">
    <div>
        <p class="aa">p01
            <span>span</span>
        </p>
        <p>p02</p>
        <p>p03</p>
    </div>
</body>
</html>